<template>
  <van-tree-select
    v-model:main-active-index="proTypeData.id"
    height="100%"
    :items="proTypeData"
    @click="clickNav(proTypeData.id)"
  >
    <template #content>
      <template v-for="item in proData" :key="item.id">
        <!-- {{ item.name }} -->
        <router-link
          v-if="item.typeid == activeIndex || !activeIndex"
          :to="{ path: '/product/product/info', query: { proid: item.id } }"
        >
          <van-image
            :src="item.cover_cdn"
            :to="{ path: '/product/info', query: item.id }"
          ></van-image>
        </router-link>
      </template>
    </template>
  </van-tree-select>

  <Tab />
</template>

<script>
import Tab from "@/components/common/Tab.vue";
import { Sidebar, SidebarItem } from "vant";

export default {
  components: {
    Tab,
  },
  data() {
    return {
      activeIndex: "",
      items: [],
      proData: [],
      proTypeData: [{ text: "所有分类" }],
    };
  },
  created() {
    this.getTypeData();
    this.getProData();
  },

  methods: {
    clickNav(e) {
      // this.activeIndex = e
      e = e || 0;

      this.activeIndex = this.proTypeData[e].id;
    },
    async getTypeData() {
      let result = await this.$api.typeData();
      // console.log(result);

      if (result.code === 1) {
        // this.proData = result.data.proData;

        for (const iterator of result.data.proTypeData) {
          this.proTypeData.push({
            text: iterator.name,
            id: iterator.id,
          });
        }
      }
      // console.log(this.proTypeData);
    },
    async getProData() {
      let result = await this.$api.ProductIndex();
      // console.log(result);

      if (result.code === 1) {
        this.proData = result.data;
      }
    },
  },
};
</script>

<style scoped>
</style>